<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form ref="queryForm" :model="queryForm" :inline="true" label-width="120px">
          <el-form-item label="机构名称：" prop="customerNm">
            <!-- <el-input v-model="queryForm.customerNm" placeholder="请输入"> </el-input> -->
            <el-autocomplete
              class="inline-input"
              v-model="queryForm.customerNm"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="机构ID：" prop="customerId">
            <el-input v-model="queryForm.customerId" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="暂停业务品种：" prop="suspensionOfBusiness">
            <el-select v-model="queryForm.suspensionOfBusiness" placeholder="请选择">
              <el-option
                v-for="item in suspensionOfBusinessList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="纳入时间：" prop="timeOfInvlusion">
            <el-date-picker
              v-model="queryForm.timeOfInvlusion"
              type="daterange"
              value-format="yyyyMMdd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="客户资质：" prop="wihteOrBlack">
            <el-select v-model="queryForm.wihteOrBlack" placeholder="请选择">
              <el-option
                v-for="item in wihteOrBlackList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="update_text">
          <span>
            <el-checkbox v-model="showNewVersion">只显示最新版本</el-checkbox>
          </span>
        </div>
        <div>
          <el-row>
            <el-col :span="16" style="text-align: left">
              <el-button type="primary" class="gray-btn" @click="dialogVisible = true"
                >编辑</el-button
              >
              <el-button type="primary" class="gray-btn" @click="exportExcel"
                >导出</el-button
              >
            </el-col>
            <el-col :span="8" style="text-align: right">
              <el-button type="primary" @click="getData" class="gray-btn">查询</el-button>
              <el-button type="primary" @click="resetFrom" class="btn">重置</el-button>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="bottomInfo">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="customerNm" label="机构名称"> </el-table-column>
          <el-table-column prop="customerId" label="机构ID"> </el-table-column>
          <el-table-column prop="wihteOrBlack" label="资质类型"> </el-table-column>
          <el-table-column prop="timeOfInvlusion" label="纳入时间"> </el-table-column>
          <el-table-column prop="reasonOfSuspension" label="暂停原因"> </el-table-column>
          <el-table-column prop="suspensionOfBusiness" label="暂停业务品种">
          </el-table-column>
          <el-table-column prop="reportingDepartment" label="提报部门"> </el-table-column>
          <el-table-column prop="version" label="版本">
            <template slot-scope="scope">
              <span>{{ scope.row.version }}</span>
              <span v-if="scope.row.version == scope.row.maxVersion">(最新)</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间"> </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageFn"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
      >
      </el-pagination> -->
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1000px"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="dialogClose"
    >
      <div>
        <div class="first-title">
          <div></div>
          <el-tooltip
            effect="dark"
            content="新增"
            placement="bottom"
            popper-class="tooltipStyle"
          >
            <i class="el-icon-plus" v-if="title !== '查看'" @click="addIndex()"></i>
          </el-tooltip>
        </div>
        <div class="table-panel">
          <div ref="tableBody" class="table-body">
            <el-table :data="tabTableData1" style="width: 100%" height="250">
              <el-table-column
                type="index"
                width="80"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                v-for="(item, index) in tabTableDataCloumns1"
                :key="index"
                :label="item.label"
                :width="item.width || ''"
                align="left"
              >
                <template slot-scope="scope">
                  <!-- <el-input
                  v-if="item.type === 'customerNm'"
                  :disabled="title === '查看'"
                  v-model="scope.row[item.dataIndex]"
                  placeholder="请输入"
                  size="mini"
                ></el-input> -->
                  <el-autocomplete
                    v-if="item.type === 'customerNm'"
                    class="inline-input"
                    v-model="scope.row[item.dataIndex]"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect($event, scope.row)"
                  ></el-autocomplete>
                  <el-input
                    v-if="item.type === 'input'"
                    :disabled="title === '查看'"
                    v-model="scope.row[item.dataIndex]"
                    placeholder="请输入"
                    size="mini"
                  ></el-input>
                  <el-date-picker
                    v-if="item.type === 'data'"
                    v-model="scope.row[item.dataIndex]"
                    type="date"
                    value-format="yyyyMMdd"
                  />
                  <div v-if="item.type === 'suspensionOfBusiness'">
                    <el-select v-model="scope.row[item.dataIndex]" placeholder="请选择">
                      <el-option
                        v-for="item in suspensionOfBusinessList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div v-if="item.type === 'wihteOrBlack'">
                    <el-select v-model="scope.row[item.dataIndex]" placeholder="请选择">
                      <el-option
                        v-for="item in wihteOrBlackList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="50" v-if="title !== '查看'">
                <template slot-scope="scope">
                  <span @click="deleteIndex(scope, scope.$index)">
                    <el-tooltip
                      effect="dark"
                      content="删除"
                      placement="bottom"
                      popper-class="tooltipStyle"
                    >
                      <i class="el-icon-delete"></i>
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="title !== '查看'" @click="handleOk()" type="primary"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList,
  getBusinessTypes,
  getselectCustomer,
  getselectByCustomer,
  insertBatch,
  getblackWhite,
} from "@/api/customerManagement/admissionList";
export default {
  data() {
    return {
      title: "编辑",
      queryForm: {},
      selectList: [],
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
      wihteOrBlackList: [
        {
          label: "黑名单",
          value: "黑名单",
        },
        {
          label: "白名单",
          value: "白名单",
        },
        {
          label: "无资质",
          value: "无资质",
        },
        // {
        //   label: "全部",
        //   value: "",
        // },
      ],
      suspensionOfBusinessList: [],
      showNewVersion: true,
      tabTableData1: [
        {
          ind: 0,
        },
        {
          ind: 1,
        },
        {
          ind: 2,
        },
      ],
      tabTableDataCloumns1: [
        {
          label: "客户名称",
          dataIndex: "customerNm",
          type: "customerNm",
          options: [],
          width: 180,
        },
        {
          label: "客户ID",
          dataIndex: "customerId",
          type: "input",
          options: [],
          width: 180,
        },
        {
          label: "客户资质",
          dataIndex: "wihteOrBlack",
          type: "wihteOrBlack",
          options: [],
          width: 180,
        },
        {
          label: "原因",
          dataIndex: "reasonofSuspension",
          type: "input",
          options: [],
          width: 180,
        },
        {
          label: "品种",
          dataIndex: "suspensionOfBusiness",
          type: "suspensionOfBusiness",
          options: [],
          width: 180,
        },
        {
          label: "纳入时间",
          dataIndex: "timeOfInvlusion",
          type: "data",
          options: [],
          width: 250,
        },
        {
          label: "提报部门",
          dataIndex: "reportingDepartment",
          type: "input",
          options: [],
          width: 180,
        },
      ],
    };
  },
  watch: {
    showNewVersion: {
      handler(val, oldVal) {
        console.log(this.showNewVersion, val);
        if (val != oldVal) {
          this.getData();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.getData();
    this.getsuspensionOfBusinessList();
  },
  methods: {
    dialogClose() {
      this.tabTableData1 = [
        {
          ind: 0,
        },
        {
          ind: 1,
        },
        {
          ind: 2,
        },
      ];
    },
    handleOk() {
      let arr = [];
      this.tabTableData1.forEach((item) => {
        if (Object.keys(item).length > 1) {
          // console.log(object);
          let params = { ...item };
          arr.push(params);
        }
      });
      // console.log(arr);
      insertBatch(arr)
        .then((res) => {
          this.$message.success(res.message);
          this.dialogVisible = false;
          this.tabTableData1 = [];
          this.getData();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addIndex() {
      this.tabTableData1.push({
        ind: this.tabTableData1.length,
      });
    },
    deleteIndex(scope, index) {
      this.tabTableData1.splice(index, 1);
    },

    getsuspensionOfBusinessList() {
      getBusinessTypes().then((res) => {
        // console.log(res);
        this.suspensionOfBusinessList = [];
        res.data.forEach((item) => {
          this.suspensionOfBusinessList.push({
            label: item,
            value: item,
          });
        });
      });
    },
    querySearch(queryString, cb) {
      console.log(queryString);
      let params = {
        customerNm: queryString,
      };
      let arr = [];
      getselectCustomer(params).then((res) => {
        // console.log(res);
        let _data = res.data || [];
        _data.forEach((item) => {
          arr.push({
            value: item.customerNm,
            label: item.customerId,
          });
        });
      });
      cb(arr);
    },
    handleSelect(item, row) {
      console.log(item, row, this.tabTableData1);
      this.tabTableData1[row.ind].customerId = item.label;
      let params = {
        customerId: row.customerId,
        customerNm: row.customerNm,
      };
      getselectByCustomer(params).then((res) => {
        if (res.data) {
          console.log(res.data);
          this.$set(this.tabTableData1[row.ind], "wihteOrBlack", res.data.wihteOrBlack);
          this.$set(
            this.tabTableData1[row.ind],
            "timeOfInvlusion",
            res.data.timeOfInvlusion
          );
          this.$set(
            this.tabTableData1[row.ind],
            "reportingDepartment",
            res.data.reportingDepartment
          );
          this.$set(
            this.tabTableData1[row.ind],
            "suspensionOfBusiness",
            res.data.suspensionOfBusiness
          );
          // this.tabTableData1[row.ind].wihteOrBlack = res.data.wihteOrBlack ;
          // this.tabTableData1[row.ind].suspensionOfBusiness =
          //   res.data.suspensionOfBusiness ;
          // this.tabTableData1[row.ind].reportingDepartment =
          //   res.data.reportingDepartment ;
          // this.tabTableData1[row.ind].timeOfInvlusion = res.data.timeOfInvlusion;
        }
      });
    },
    exportExcel() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.queryForm,
        showNewVersion: this.showNewVersion,
        name: "准入名单管理",
      };
      if (params.timeOfInvlusion && params.timeOfInvlusion.length > 0) {
        params.timeOfInvlusionBegin = params.timeOfInvlusion[0];
        params.timeOfInvlusionEnd = params.timeOfInvlusion[1];
      }
      delete params.timeOfInvlusion;
      getblackWhite(params);
    },
    resetFrom() {
      this.$refs.queryForm.resetFields();
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },
    getData() {
      try {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...this.queryForm,
          showNewVersion: this.showNewVersion,
        };
        if (params.timeOfInvlusion && params.timeOfInvlusion.length > 0) {
          params.timeOfInvlusionBegin = params.timeOfInvlusion[0];
          params.timeOfInvlusionEnd = params.timeOfInvlusion[1];
        }
        delete params.timeOfInvlusion;
        getList(params).then((res) => {
          console.log(res);
          if (res) {
            this.tableData = res.data.records;
            (this.pageNum = res.data.current),
              (this.pageSize = res.data.size),
              (this.total = res.data.total);
          }
        });
        // console.log(res);
      } catch (error) {}
    },
    resetFn() {
      this.queryForm = {
        // xxx
      };
     
    },
    pageFn(num) {
      this.pageNum = num;
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .bottomInfo {
    flex: 1;
    width: 100%;
    background-color: #262d47;
    padding-bottom: 20px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .el-table {
    min-height: 440px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.update_text {
  color: #fff;
  text-align: right;
  margin: 10px 10px 10px 0px;
}
::v-deep .el-form .el-form-item .el-form-item__content .el-input__inner {
  width: 240px !important;
}
::v-deep {
  .el-dialog {
    .el-icon-date {
      height: 30px !important;
      line-height: 30px !important;
    }
    .el-range-separator {
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      z-index: 10;
    }
    .el-input__inner {
      border: 1px solid rgba(126, 163, 255, 0.3) !important;
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      .el-range-input {
        background-color: #363657 !important;
        height: 28px !important;
        line-height: 28px !important;
      }
    }
  }
}
.first-title {
  display: flex;
  justify-content: space-between;
}
</style>
